<template>
	<view class="wrap">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<view class="info">
			<view class="avatar">
				<view class="photo">
					<image class="img" src="https://tb.wuyouzhuan888.com/applet-icon/huangguan.png"
						mode=""></image>
					<view class="name">
						{{info.vipName}}
					</view>
				</view>
 
				<view class="price">
					<text class="unit">¥</text>
					<text class="money">{{info.price}}</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item">
				<view class="top">

					<view v-if="info.status == 1" class="right">
						<image class="status"
							src="https://tb.wuyouzhuan888.com/applet-icon/orderStatus2.png" mode="">
						</image>
						<text>已支付</text>
					</view>
					<view v-else class="right">
						<image class="status"
							src="https://tb.wuyouzhuan888.com/applet-icon/orderStatus1.png" mode="">
						</image>
						<text style="color: #FFC01F;">待支付</text>
					</view>
				</view>
				<view class="bot">
					<view class="li">
						支付金额：{{info.price}}元
					</view>
					<view class="li">
						交易类型：{{info.payWay}}
					</view>
					<view class="li">
						订单编号：{{info.orderNo}}
					</view>
					<view class="li">
						创建时间：{{info.createTime}}
					</view>
					<view class="li">
						支付时间：{{info.payTime || ''}}
					</view>
				</view>
			</view>
			<view class="serviceCont" @click="contastUs()">
				<view class="service">
					<image class="icon" src="https://tb.wuyouzhuan888.com/applet-icon/kf.png" mode="">
					</image>
					联系客服
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';

	export default {
		components: {
			HeadNavBar,
		},
		data() {
			return {
				info: {}
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: "加载中...",
			})
			this.info = JSON.parse(decodeURIComponent(options.info));
		},
		mounted() {
			uni.hideLoading()
		},
		methods: {
			// 联系我们
			contastUs() {
				// 获取联系我们客服地址
				this.$u.api.mine.getCustomerUrl().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}
			
					uni.navigateTo({
						url: '/pages/sys/user_bags/webview?url=' + res.data.customerUrl
					})
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 32rpx;

		.serviceCont {
			width: 100%;
			margin-top: 32rpx;
			display: flex;
			justify-content: flex-end;
			.service {
				border-radius: 70rpx;
				width: 263rpx;
				height: 80rpx;
				border: 1rpx solid #505DCB;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				font-family: PingFang HK-Light, PingFang HK;
				font-weight: 300;
				color: #A389EE;
				.icon {
					width: 44rpx;
					height: 44rpx;
					margin-right: 4rpx;
				}
			}
		}
		.list {
			margin-top: 32rpx;

			.item {
				margin-bottom: 32rpx;
				padding: 0 32rpx;
				border-radius: 22rpx;
				border: 1rpx solid #4F30A8;
				background: linear-gradient(to right, #213786, #3A156D);

				.bot {
					padding: 20rpx 0;
					line-height: 49rpx;
					font-size: 22rpx;
					font-family: HYQiHei-45S, HYQiHei;
					font-weight: normal;
					color: #B9B8FF;

					.li {
						display: flex;
						align-items: center;

					}

					.copy {
						width: 30rpx;
						height: 30rpx;
						margin-left: 15rpx;
					}
				}

				.top {
					padding: 32rpx 0 20rpx 0;
					border-bottom: 1rpx solid #5260AB;
					display: flex;
					align-items: center;

					justify-content: center;

					.left {
						display: flex;
						align-items: center;

						.icon {
							width: 38rpx;
							height: 40rpx;
						}

						text {
							font-size: 30rpx;
							font-family: PingFang HK-Light, PingFang HK;
							font-weight: 300;
							color: #FFFFFF;
							margin-left: 10rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.status {
							width: 32rpx;
							height: 32rpx;
							margin-right: 13rpx;
						}

						text {
							font-size: 24rpx;
							font-family: PingFang HK-Light, PingFang HK;
							font-weight: 300;
							color: #03DACE;
						}
					}

				}
			}
		}

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}

		.info {
			margin-top: 20rpx;

			.avatar {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.photo {
					display: flex;
					align-items: center;

					.name {
						font-size: 36rpx;
						font-family: PingFang HK-Light, PingFang HK;
						font-weight: 300;
						color: #FFFFFF;
					}

					.img {
						width: 118rpx;
						height: 118rpx;
						margin-right: 24rpx;

					}


				}

				.price {
					display: flex;
					align-items: flex-end;

					.unit {
						font-size: 37rpx;
						font-family: PingFang SC-Light, PingFang SC;
						font-weight: 300;
						line-height: 43px;
						text-shadow: 0px 2px 0px rgba(30, 19, 100, 0.42);
						background: linear-gradient(180deg, #FFECBB 0%, #FFFFFF 30%, #F4F2FF 36%, #FFE2AB 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						margin: 0 10rpx 15rpx 0;
					}

					.money {
						font-size: 58rpx;
						font-family: HYQiHei-40S, HYQiHei;
						font-weight: normal;
						line-height: 68px;
						background: linear-gradient(180deg, #FFE298 0%, #FFFFFF 30%, #F4F2FF 36%, #FFE5A3 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

			}
		}
	}
</style>